
<title>标题</title>

<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>新闻资讯</cite></a>
    <a><cite>新闻列表</cite></a>
  </div>
</div>

<style>
/* 这段样式只是用于演示 */

</style>

<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md8">
      <div class="layui-card">
        <div class="layui-card-header layui-btn-container" style="display: flex ; align-items: center; justify-content: space-between;">
            <div>查询过滤</div>
            <div class="">
                <button type="button" class="layui-btn layui-btn-sm" data-status="1" lay-active="articleFilter">审核通过</button> 
                <button type="button" class="layui-btn layui-btn-sm" data-status="10" lay-active="articleFilter">等待一审</button> 
                <button type="button" class="layui-btn layui-btn-sm" data-status="20" lay-active="articleFilter">等待二审</button> 
                <button type="button" class="layui-btn layui-btn-sm" data-status="30" lay-active="articleFilter">等待三审</button> 
                <button type="button" class="layui-btn layui-btn-sm" data-status="0" lay-active="articleFilter">只看草稿</button> 
            </div>
        </div>
        <div class="layui-card-body">
          <table id="table_article_list" lay-filter="table_article_list"></table>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-card">
        <div class="layui-card-header">管理日志</div>
        <div class="layui-card-body">
          <table id="table_article_logger" lay-filter="table_article_logger"></table>
          
        </div>
      </div>
    </div>
  </div>
</div>

<script>
layui.use(['admin'], function(){
    var {table,util} = layui;
    var $ = layui.$,admin = layui.admin,element = layui.element,router = layui.router();
    
    // 加载列表
    const article_table = table.render({
        id:'table_article_list',
        elem:'#table_article_list',
        url:'article/list',
        cols:[
            [
                {type:'radio',fixed:'left',title:'选中'},
                {field:'title',title:'标题'}
            ]
        ],
        parseData:function(res){
            console.log(res)
            return {
                code:0,
                msg:'',
                count:0,
                data:res.result.data
            }

        }
    });
    // 
    const loggerRender = (uuid)=>{
        table.render({
            elem:'#table_article_logger',
            url:'https://api.youloge.com/article/logger',
            where:{
                mode:'article',
                uuid:uuid
            },
            cols:[
                [
                    {field:'field',title:'修改字段'},
                    {field:'oldest',title:'原值'},
                    {field:'latest',title:'现值'},
                    {field:'remark',title:'备注'},
                    {field:'created',title:'创建时间'},
                ]
            ],
            parseData:function(res){
                console.log(res)
                return {
                    code:0,
                    msg:'',
                    count:0,
                    data:res.result.data
                }
    
            }
        });
    }
    // 单机
    table.on('radio(table_article_list)', function(obj) {
        let uuid = obj.data.uuid;
        loggerRender(uuid)
        console.log(obj.data)
    });
    
    // 加载日志
    function loadLogger(){

    }
    // 事件监听
    util.on('lay-active',{
        'articleFilter':function(){
            let {status} = this.dataset
            table.reload('table_article_list',{
                where:{
                    status:status
                }
            });
        }
    });
});
</script>